<script lang="ts" setup>
import { useAdminMyselfStore } from '../store/adminMyself'
import { computed } from 'vue'

const { data } = useAdminMyselfStore()

const emailSuffix = ['@qq.com', '@163.com', '@gmail.com', '@outlook.com']
const emailOptions = computed(() => {
  const emailPrefix = data.email.split('@')[0]
  if (!emailPrefix) return []
  return emailSuffix.map((suffix) => emailPrefix + suffix)
})
</script>

<template>
  <t-row style="width: 100%">
    <t-col :lg="5" :md="6" :sm="12" :xl="5" :xs="12">
      <t-space class="left_space" direction="vertical">
        <t-form :data="data" label-align="right" label-width="70px">
          <t-form-item label="用户名">
            <t-input v-model="data.name" placeholder="请输入用户名" />
          </t-form-item>

          <t-form-item label="邮箱">
            <t-auto-complete
              v-model="data.email"
              :options="emailOptions"
              placeholder="请输入邮箱"
            />
          </t-form-item>

          <t-form-item label="密码">
            <t-input v-model="data.password" type="password" placeholder="请输入密码" />
          </t-form-item>

          <!--          <t-form-item label="用户状态">-->
          <!--            <t-radio disabled v-model="data.status">-->
          <!--              <t-link theme="danger" hover="color">-->
          <!--                封禁-->
          <!--              </t-link>-->
          <!--            </t-radio>-->
          <!--          </t-form-item>-->
        </t-form>
      </t-space>
    </t-col>
    <t-col :lg="7" :md="6" :sm="12" :xl="7" :xs="12" class="right">
      <img alt="" class="img" src="@/assets/images/author/pay-bg.png" />
    </t-col>
  </t-row>
</template>

<style lang="less" scoped>
.left_space {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.right {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 40%;
  }
}
</style>
